<template>


	<view class="page-section page-section-gap">
		<map id="mapp" latitude="30.593674" longitude="104.144341" scale="18" :show-compass="true" :show-scale="true"
			:polyline="polyline" :markers="markers">
		</map>
	</view>


</template>

<script>
	export default {
		data() {
			return {
				markers: [{
						id: 1000,
						latitude: 30.593497,
						longitude: 104.143973,
						width: 40,
						height: 60,
						rotate: 30,

					},
					{
						id: 1001,
						latitude: 30.594113,
						longitude: 104.145534,
						width: 40,
						height: 60,

					}
				],
				polyline: [{
					points: [],
					color: "#33c9FFDD",
					width: 3,
					dottedLine: false
				}]

			}
		},
		onLoad() {
			this.$qqmap.direction({
				mode: 'walking', //可选值：'driving'（驾车）、'walking'（步行）、'bicycling'（骑行），不填默认：'driving',可不填
				//from参数不填默认当前地址
				from: '30.593579,104.143088',
				to: '30.595487,104.148737',
				success: (res) => {
					console.log(res);
					var ret = res;
					var coors = ret.result.routes[0].polyline,
						pl = [];
					//坐标解压（返回的点串坐标，通过前向差分进行压缩）
					var kr = 1000000;
					for (var i = 2; i < coors.length; i++) {
						coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
					}
					//将解压后的坐标放入点串数组pl中
					for (var i = 0; i < coors.length; i += 2) {
						pl.push({
							latitude: coors[i],
							longitude: coors[i + 1]
						})
					}
					
					//设置polyline属性，将路线显示出来,将解压坐标第一个数据作为起点
					// console.log(this.polyline);
					this.polyline[0].points = pl
					
				},
				fail: function(error) {
					console.error(error);
				},
				complete: function(res) {
					console.log(res);
				}
			});
		},
		onShow() {

		},
		onUnload() {

		},
		methods: {




		}
	}
</script>

<style lang="scss">
	#mapp {
		height: 1000rpx;
		width: 100%;
	}
</style>
